<template>
	<view class="navbar">
		<view class="navbar_left" @click="goto">
			<svg width="15" height="10">
				<line x1="5" y1="0" x2="0" y2="5" style="stroke:rgb(255,255,255);stroke-width:2" />
				<line x1="5" y1="10" x2="0" y2="5" style="stroke:rgb(255,255,255);stroke-width:2" />
			</svg>
			返回
		</view>
		<view class="navbar_center">巡检统计</view>
		<picker @change="bindPickerChange" :value="index" :range="array">
			<view class="navbar_right">{{ array[index] }}</view>
		</picker>
	</view>
	<view class="toplist">
		<view class="content">
			<view class="item">
				<text>12</text>
				<text>待处理任务</text>
			</view>
			<view class="item">
				<text>31</text>
				<text>处理中任务</text>
			</view>
			<view class="item">
				<text>17</text>
				<text>已完成任务</text>
			</view>
			<view class="item">
				<text>24</text>
				<text>已过期任务</text>
			</view>
		</view>
	</view>
	<view class="echart">
		<p><span>巡检状态</span></p>
		<view class="pie"><qiun-data-charts type="ring" :opts="data.opts" :chartData="data.chartData" /></view>
	</view>
	<view class="echart">
		<p><span>巡检任务数量（每月）</span></p>
		<view class="bar"><qiun-data-charts type="bar" :opts="data.opts2" :chartData="data.chartData2" /></view>
	</view>
</template>

<script>
import { onMounted, reactive, ref } from 'vue';
</script>

<script setup>
const data = reactive({
	chartData: {
		series: [
			{
				data: [
					{ name: '正常', value: 50, labelShow: false },
					{ name: '故障', value: 30, labelShow: false },
					{ name: '停机', value: 20, labelShow: false },
					{ name: '维修检', value: 8, labelShow: false }
				]
			}
		]
	},

	//您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
	opts: {
		rotate: false,
		rotateLock: false,
		color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
		padding: [5, 40, 5, 0],
		dataLabel: true,
		enableScroll: false,
		legend: {
			show: true,
			position: 'right',
			lineHeight: 50
		},

		extra: {
			ring: {
				ringWidth: 20,
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 15,
				border: true,
				borderWidth: 3,
				borderColor: '#FFFFFF'
			}
		}
	},	

	// 条状图
	chartData2: {
			categories: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
            series: [
              {
                name: "待处理任务",
                data: [35,36,31,33,13,34,23,54,65,12,76,34]
              },
              {
                name: "待处理任务",
                data: [18,27,,54,65,12,76,34,22,21,24,6,28]
              },
              {
                name: "已完成任务",
                data: [18,27,,54,65,12,76,34,22,21,24,6,28]
              },
              {
                name: "已过期任务",
                data: [18,27,,54,65,12,76,34,22,21,24,6,28]
              }
            ]
	},
	//您可以通过修改 config-ucharts.js 文件中下标为 ['bar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
	opts2: {
	color: ["#1890FF","#91CB74","#FAC858","#EE6666"],
	padding: [30,0,0,0],
	enableScroll: false,
	legend: {},
	xAxis: {
	  boundaryGap: "justify",
	  disableGrid: false,
	  min: 0,
	  axisLine: false,
	  max: 70
	},
	yAxis: {},
	extra: {
	  bar: {
		type: "stack",
		width: 0,
		meterBorde: 1,
		meterFillColor: "#15ffff",
		activeBgColor: "#000000",
		activeBgOpacity: 0.08,
		categoryGap: 1
	  }
	}
	}


});
let index = ref(1);
let array = ref(['中国']);
// 年份得靠下得弹框
let bindPickerChange = e => {
	console.log(e.detail.value);
	index.value = e.detail.value;
};

let settime = e => {
	console.log(e);
};
const goto = () => {
	console.log('返回按钮得事件');
};

onMounted(() => {
	let arr = [];
	for (let i = 1900; i < 2023; i++) {
		arr.push(i);
	}
	array.value = arr;
});
</script>

<style lang="scss">
.navbar {
	border: 0rpx;
	display: flex;
	justify-content: space-between;
	background-color: #57b9f7;
	color: white;
	line-height: 50rpx;
	width: 100vmin;
	.navbar_left {
		margin: 5rpx 15rpx;
	}
	.navbar_right {
		margin: 5rpx 15rpx;
	}
	.navbar_center {
		font-weight: 600;
		text-align: center;
	}
}
.toplist {
	border: 0rpx;
	height: 200rpx;
	background-color: #57b9f7;
	position: relative;
	.content {
		background: white;
		width: calc(100vw - 40rpx);
		height: 100rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 10px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		.item {
			display: flex;
			flex-direction: column;
			text-align: center;
			border-right: 1px darkgray solid;
			padding: 0rpx 15rpx;
			height: 80rpx;
			margin: auto;

			text:first-child {
				font-size: 40rpx;
				color: #4a77ff;
			}
			text:nth-child(2) {
				font-weight: 100;
			}
		}
		.item:last-child {
			border: 0;
		}
	}
}
.echart {
	p {
		line-height: 80rpx;
		color: #6b6e87;
		background-color: #e5e9f1;
		span {
			margin: 10rpx 30rpx;
		}
	}
	.pie {
		width: 100%;
		height: 300px;
	}
}
</style>
